<template>
    <div class="page">
        <group>
         
          <x-input  title="联系人" v-model="address.username" placeholder="请填写联系人" text-align="right"></x-input>
          <x-input title="联系电话" v-model="address.phone" is-type="china-mobile" placeholder="请输入联系电话" text-align="right"></x-input>
          <x-address @on-hide="logHide" 
                     title="地址" 
                     v-model="chooseValue" 
                     :list="addressData"
                     @on-shadow-change="onShadowChange" 
                     :placeholder="placeholderValue"
                     :show.sync="showAddress"/>
          <x-textarea  title="详细地址" v-model="address.address"  placeholder="请填写详细地址" text-align="right"></x-textarea>
          <x-button type="primary" :show-loading="showLoading" @click.native="saveUserAddress">保存</x-button>
          <divider>保存并返回</divider>
        </group>

    </div>
</template>


<script>
import CrossLine from "@/components/base/cross-line/cross-line";
import { mapGetters } from "vuex";

import {
  Cell,
  Group,
  XInput,
  XTextarea,
  XAddress,
  ChinaAddressV4Data,
  XButton,
  Divider,
  Value2nameFilter as value2name
} from "vux";

export default {
  components: {
    CrossLine,
    Cell,
    Group,
    XInput,
    XTextarea,
    XAddress,
    ChinaAddressV4Data,
    XButton,
    Divider,
    value2name
  },
  data() {
    return {
      isEdit: false,
      address: {
        phone: null,
        username: null,
        address: null,
        province: null,
        province_code: null,
        city: null,
        city_code: null,
        area: null,
        area_code: null
      },
      shadowChangeValue: {
        province: null,
        province_code: null,
        city: null,
        city_code: null,
        area: null,
        area_code: null
      },
      showLoading: false,
      addressData: ChinaAddressV4Data,
      showAddress: false,
      chooseValue: [],
      placeholderValue: "请选择地址"
    };
  },
  props: {},
  watch: {
    chooseValue: function(v) {
      // console.log("chooseValue:::", v);
    },
    placeholderValue: function(v) {
      // console.log("placeholderValue:::", v);
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    gotoEditUserInfo(type) {
      //   this.$router.push(`/order/list/${type}`);
    },
    saveUserAddress() {
      this.showLoading = true;
      // console.log("saveUserAddress:::::", this.address);

      this.address.user_id = this.userID;
      if (this.isEdit) {
        let _data = {
          id: this.address.id,
          phone: this.address.phone,
          username: this.address.username,
          address: this.address.address,
          province: this.address.province,
          province_code: this.address.province_code,
          city: this.address.city,
          city_code: this.address.city_code,
          area: this.address.area,
          area_code: this.address.area_code,
          user_id: this.address.user_id
        };
        this.$$api_user_updateAddress({
          data: _data,
          fn: res => {
            this.showLoading = false;
            this.goBack();
          },
          errFn: res => {
            this.showLoading = false;
            // console.log("api_user_updateAddress errFn res2:::::", res);
          }
        });
      } else {
        let _data = {
          phone: this.address.phone,
          username: this.address.username,
          address: this.address.address,
          province: this.address.province,
          province_code: this.address.province_code,
          city: this.address.city,
          city_code: this.address.city_code,
          area: this.address.area,
          area_code: this.address.area_code,
          user_id: this.address.user_id
        };
        this.$$api_user_addAddress({
          data: _data,
          fn: res => {
            this.showLoading = false;
            this.goBack();
          },
          errFn: res => {
            // console.log("api_user_addAddress errFn res2:::::", res);
            this.showLoading = false;
          }
        });
      }
    },
    getUserAddress(userId) {
      this.$$api_user_addressInfo({
        data: userId,
        fn: res => {
          if (res.length > 0) {
            this.isEdit = true;
            this.address = res[0];

            this.chooseValue=[this.address.province_code,this.address.city_code,this.address.area_code]
            this.placeholderValue=this.getName(this.chooseValue);
          } else {
            this.isEdit = false;
            this.chooseValue = [];
            
          }
        }
      });
    },
    doShowAddress() {
 
      this.showAddress = true;
      setTimeout(() => {
        this.showAddress = false;
      }, 2000);
    },
    /**
     * 监听省市区的变化，并返回选择结果
     */
    onShadowChange(ids, names) {
      this.shadowChangeValue = {
        province: names[0],
        province_code: ids[0],
        city: names[1],
        city_code: ids[1],
        area: names[2],
        area_code: ids[2]
      };
    },
    /**
     * 根据 省市区编码，获取中文地址
     */
    getName(value) {
      // console.log("getName");
      return value2name(value, ChinaAddressV4Data);
    },
    /**
     * 省市区选择器被关闭时，触发的事件
     * @param changed: Boolean 类型，用于判断选择结果是否已经发生变化，false表示没有改变
     */
    logHide(changed) {
      if (changed) {
        // 判断选择结果是否已经该表
        this.address.province = this.shadowChangeValue.province;
        this.address.province_code = this.shadowChangeValue.province_code;
        this.address.city = this.shadowChangeValue.city;
        this.address.city_code = this.shadowChangeValue.city_code;
        this.address.area = this.shadowChangeValue.area;
        this.address.area_code = this.shadowChangeValue.area_code;
      }
    }
  },
  filters: {},
  computed: {
    ...mapGetters(["userID"])
  },
  created() {
    this.getUserAddress(this.userID);
  },
  mounted() {},
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/base.scss";
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.page {
  background-color: $app-background-color;
  padding: 0 15px;
  .btn {
    margin: 15px 0;
  }
}
</style>
 